@import '../../../styles/var.scss';

.businessTimePicker {
  width: 100%;
}

.displayArea {
  // padding: 24px 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;

  &:active:not(.disabled) {
    opacity: 0.7;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.6;

    &::after {
      border-left-color: #d9d9d9;
    }
  }
}

.mainContent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.displayText {
  font-size: 28px;
  color: #333;
  transition: color 0.3s ease;

  &.placeholder {
    color: #999;
  }

  &.disabledText {
    color: #bbb;
  }
}

.durationText {
  font-size: 24px;
  color: #666;
  font-weight: 400;
}

// 添加一些交互增强
.businessTimePicker {
  &:hover:not(.disabled) .displayArea::after {
    border-left-color: #1890ff;
  }
}
